


/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
let totalcount = 0
const queryobj = {
    status: '',
    channel_id: '',
    page: 1,
    per_page: 2
}
async function setpage() {
    const data = await axios({
        url: '/v1_0/mp/articles',
        params: queryobj
    })
    console.log(data);
    console.log(data.data.results);
    const arr = data.data.results

    totalcount = data.data.total_count
    const tr = arr.map(item => {
        return `<tr>
                <td>
                  <img src="${item.cover.images[0] ? item.cover.images[0] : 'https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500'}" alt="">
                </td>
                <td>${item.title}</td>
                <td>
                ${item.status == '1' ? '<span class="badge text-bg-primary">待审核</span>' : '<span class="badge text-bg-success">审核通过</span> '}
                </td >
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td>
                  <i class="bi bi-pencil-square edit" data-id='${item.id}'></i>
                  <i class="bi bi-trash3 del" data-id='${item.id}'></i>
                </td>
              </tr > `
    }).join('')
    document.querySelector('.art-list').innerHTML = tr
    document.querySelector('.total-count ').innerHTML = `共${totalcount} 条`
    document.querySelector('.page-now').innerHTML = `第${queryobj.page} 页`
}
setpage()
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
async function select() {
    const data = await axios({
        url: '/v1_0/channels'
    })

    const htmlstr = `<option selected="">请选择文章频道</option>`
        + data.data.channels.map(item => {
            return `<option option value = "${item.id}" > ${item.name}</option> `
        })
    document.querySelector('.form-select').innerHTML = htmlstr
}
select()
document.querySelectorAll('.form-check').forEach(item => {
    item.addEventListener('click', e => {
        queryobj.status = e.target.value
    })
})
document.querySelector('.form-select').addEventListener('change', e => {
    queryobj.channel_id = e.target.value
    console.log();
})

document.querySelector('.sel-btn').addEventListener('click', () => {
    setpage()
})


/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
document.querySelector('.next').addEventListener('click', e => {

    if (queryobj.page < Math.ceil(totalcount / 2)) {
        queryobj.page++

        setpage()
    }
})
document.querySelector('.last').addEventListener('click', e => {

    if (queryobj.page > 1) {
        queryobj.page--
        setpage()
    }
})
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', async e => {
    if (e.target.classList.contains('del')) {
        const res = await axios({
            url: `/v1_0/mp/articles/${e.target.dataset.id} `,
            method: 'delete'
        })

        if (document.querySelector('.art-list').children.length == 1 && queryobj.page > 1) {
            queryobj.page--
        }
        setpage()
    }
    if (e.target.classList.contains('edit')) {
        location.href = `../publish/index.html?id=${e.target.dataset.id} `

    }


})
document.querySelector('.quit').addEventListener('click', () => {
    alert('即将退出！')
    setTimeout(() => {
        location.href = '../login/index.html'
    }, 1500);
})


